const { CleanWebpackPlugin } = require("clean-webpack-plugin")
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
    mode: "development",
    devtool: "source-map",
    output: {
        filename: "scripts/[name].[chunkhash:5].js",
        // publicPath: "/"
        // 配置publicPath，配置的就是一个字符串，出现在__webpack_require的静态属性p上
        // 会影响一些plugin和loader的路径，会拼接在前面
        // 往往会写一个/ ，以/开始的是一个绝对路径，相当于简写，相当于会在前面加上协议名域名和端口号
    },
    module: {
        rules: [
            {
                test: /\.(png)|(gif)|(jpg)$/,
                use: [{
                    loader: "file-loader",
                    options: {
                        name: "imgs/[name].[hash:5].[ext]",
                        publicPath: "../"   //可以单独配置这个加载器的这个选项，只会影响这个loader，不会改变__webpack_require的静态属性p
                    }
                }]
            }
        ]
    },
    plugins: [
        new CleanWebpackPlugin(),
        new HtmlWebpackPlugin({
            template: "./public/index.html",
            filename: "html/index.html"
        })
    ],
    devServer: {
        open: true,
        openPage: "html/index.html",
    },
    stats: {
        modules: false,
        colors: true
    }
}